<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>智能订餐</title>
    <meta name="description" content="">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui, user-scalable=no">
    <meta http-equiv="cleartype" content="on">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/assets/base/Inforschool/css/style.css">
    <link rel="stylesheet" href="/assets/base/Inforschool/css/layer.css">
</head>
<body>
<form action="/Base/Inforschool/check" enctype="multipart/form-data" method="post">
    <div class="wraper">
        <div class="min-height">
            <div class="header font-white">
                <a href="javascript:history.go(-1)" class="iconfont icon-left font-white back"></a>
                <div class="font-16 text-center">确认订餐</div>
            </div>
            <div class="bg_white margin-12 padding-12">
                <div class="boxs flex_between font-gray2 padding-0 border">
                    <div class="hint font-gray1">收货人：</div>
                    <input type="text" name="consignor" id="consignor" placeholder="请输入姓名" class="flex_1 add_input">
                </div>
                <div class="boxs flex_between font-gray2 padding-0 border">
                    <div class="hint font-gray1">手机号：</div>
                    <input type="text" name="mobile" id="tel" placeholder="请输入手机号码" class="flex_1 add_input">
                </div>
                <div class="boxs flex_between font-gray2 padding-0 border">
                    <div class="hint font-gray1">用餐地点：</div>
                    <input type="text" name="place" id="place" placeholder="请输入用餐地点" class="flex_1 add_input">
                </div>
                <input type="hidden" id="or_id" name="or_id" value="{BEESCRM:$or_id}">
            </div>

            <!-- 在接待中才会显示以下模块-->
            <input type="hidden" id="image2" value="{BEESCRM:$dctype}">
            <if condition="$dctype neq 1">
                <div class="thumb-preview bg_white margin-12 padding-12-0 clearfix js_loadimg">
                    <div class="thumb-preview pull-left upload_pictures load_img text-center">
                        <form id="upload-form" enctype="multipart/form-data" name="form" onsubmit="return false"
                              class="upload-wrap">
                            <div class="iconfont icon-zhaoxiang" id="addimg"></div>
                            <p class="font-gray1 font-12">请上传接待函</p>
                            <p class="font-gray1 font-12 img_mumber">(0/3)</p>
                            <a href="javascript:;" id="upload"></a>
                        </form>
                    </div>
                </div>
            </if>

        </div>
        <input type="hidden" id="url" name="url">
        <input type="hidden" id="serverid" name="serverid">
        <input type="submit" class="hide js_submit" value="下一步" id="submit">
        <a href="#" class="btn btn2 font-16 text-center" id="reg">下一步</a>


        <div class="pop-box height text-center hide" id="pop-box">
            <div class="pop-hint font-gray1">
                <div class="top_green"></div>
                <div>
                    <p class="pop_title ">提示</p>
                    <p class="pop_txt js_poptxt">真的要删除？</p>
                </div>
                <div class="flex_between pop_bottom">
                    <a href="#" class="pop_btn width-50">取消</a>
                    <a href="#" class="pop_btn width-50 active yes" id="check">确定</a>
                </div>
            </div>
        </div>

        <div class="pop-box height hide pop-tab">
            <div class="table-cell">
                <div class="pop-images">
                    <img class="js_pop-img" src="" alt="">
                    <div class="pop-close iconfont icon-cheng1">
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<script src="/assets/base/Inforschool/js/jquery-2.1.0.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="/assets/base/Inforschool/js/jquery.fileupload.js"></script>
<script type="text/javascript" src="/assets/bower_components/upload/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/assets/bower_components/upload/jquery.fileupload.js"></script>
<script type="text/javascript" src="/assets/bower_components/upload/jquery.iframe-transport.js"></script>
<script src="/assets/base/Inforschool/js/layer.js"></script>
<script src="/assets/base/Inforschool/js/public.js"></script>
<script type="text/javascript">
    wx.config({
        debug: false,
        appId: "{BEESCRM:$appid}",
        timestamp: "{BEESCRM:$timestamp}",
        nonceStr: "{BEESCRM:$noncestr}",
        signature: "{BEESCRM:$signature}",
        jsApiList: ['chooseImage', 'uploadImage']
    });
</script>
<script>


    var height = $(window).height();
    $('.wraper').css('minHeight', height);
    var btn_height = $('.btn').innerHeight();
    $('.min-height').css('height', height - btn_height);


    //下一步
    $('.btn').click(function () {
        $('.js_submit').click();
    });

    //    //点击提交
    $('#submit').click(function () {
        var myreg = /^1[34578]\d{9}$/;
        var tel = $('#tel').val();
        var images = $('#image2').val();
        var num = tel.toString().length;
        console.log(tel);
        var arr = [];
        $('.img_add').each(function () {
            arr.push(this.src);
        });
        var url = arr.join('@');
        var serverid = serverArr.join('@');
        //alert(serverid);
        $("#serverid").val(serverid);
        //$("#url").val(url);
        var place = $('#place').val();
        var consignor = $('#consignor').val();
        if (!consignor) {
            fm.alert('请填写收货人！');
            return false;
        }
        /*   if (!myreg.test(tel) || (num < 7 && !isNaN(tel))) {
         fm.alert('请输入有效的手机号码或短号！');
         return false;
         }*/
        if (!tel) {
            fm.alert('请输入手机号码或短号！');
            return false;
        }
        if (isNaN(tel) && num <= 7) {
            fm.alert('请输入有效的手机号码或短号！');
            return false;
        } else if (!myreg.test(tel) && num > 7) {
            fm.alert('请输入有效的手机号码或短号！');
            return false;
        }


        if (!place) {
            fm.alert('请填写用餐地点！');
            return false;
        }
        if (images == 2 && serverid == "") {
            fm.alert('请上传接待函！');
            return false;
        }
    });


    // 图片上传
    var imgLength = 0,img_id = 0,serverArr = [];
    $(document).on('click', '#upload', function () {
        if (imgLength >= 3) {
            fm.alert('图片太多了呦~');
            return false;
        } else {
            wx.ready(function () {
                wx.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {
                        var localIds = res.localIds;
                        //alert(localIds);
                        // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                        // localId 可以用于微信手机版图片显示（目前PC版不可用）


                        $('.js_loadimg').prepend('<div class="pull-left thumb js_load img-'+ img_id +'" data-id=""><img class="portrait img_add" src="' + localIds[0]+ '"><div class="iconfont icon-close js_close font-gray2"></div></div>');
                        imgLength++;

                        var localId = localIds.pop();

                        wx.uploadImage({
                            localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
                            isShowProgressTips: 1, // 默认为1，显示进度提示
                            success: function (res) {
                                var serverId = res.serverId; // 返回图片的服务器端ID
                                //alert(serverId);
                                $('.img-' + img_id).data('id', serverId);
                                img_id++;
                                serverArr.push(serverId);
//                                $('#serverId').prepend('<input type="hidden" id="serverId" value="'+ serverId +'" class="serverId">');
                                //$('.serverId').val(serverId);
                            }
                        });
                        $('.img_mumber').text('('+imgLength+'/3)');
                    }
                });
            });

        }
    });

    //图片删除和图片放大
    $(".thumb-preview").on('click', '.thumb', function () {
        event.preventDefault();
        if ($(event.target).is('.js_close')) {
            $('#pop-box').removeClass('hide');
            var $this = $(this);
            $('#pop-box').on('click', '.yes', function () {
                $this.remove();
                imgLength -= 1;
            });
        } else {
            var src = $(this).find('img').attr('src');
            $('.pop-tab').removeClass('hide');
            $('.js_pop-img').attr('src', src);
        }
    });
    $('#pop-box').on('click', '.pop_btn', function () {
        $('#pop-box').addClass('hide');
    });
    $('.pop-close').click(function () {
        $('.pop-box').addClass('hide');
    })
</script>
</body>
</html>